<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="eventC">
      <div class="block">
        <span class="demonstration">最小年份</span>
        <el-slider @change="updateMinYear" v-model="valuemin" :min="min" :max="max" :step="step"></el-slider>
      </div>
      <div class="block">
        <span class="demonstration">最大年份</span>
        <el-slider @change="updateMaxYear" v-model="valuemax"  :min="min" :max="max" :step="step"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
// import Stamen from 'ol/source/Stamen'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import WebGLPointsLayer from 'ol/layer/WebGLPoints'
import {Vector, XYZ} from 'ol/source'
import {fromLonLat} from 'ol/proj'
export default {
  name: 'index',
  data () {
    return {
      step: 1,
      min: 1850,
      max: 2015,
      valuemin: 1850,
      valuemax: 1890,
      map: null,
      vectorSource: null,
      oldColor: 'rgba(242,56,22,0.61)',
      newColor: '#ffe52c',
      period: 12, // animation period in seconds
      animRatio: [],
      style: {}
    }
  },
  mounted () {
    this.animRatio = [
      '^',
      [
        '/',
        [
          '%',
          [
            '+',
            ['time'],
            ['interpolate', ['linear'], ['get', 'year'], 1850, 0, 2015, this.period]
          ],
          this.period
        ],
        this.period
      ],
      0.5
    ]
    this.style = {
      variables: {
        minYear: 1850,
        maxYear: 2015
      },
      filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
      symbol: {
        symbolType: 'circle',
        size: [
          '*',
          ['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26],
          ['-', 1.75, ['*', this.animRatio, 0.75]]
        ],
        color: ['interpolate', ['linear'], this.animRatio, 0, this.newColor, 1, this.oldColor],
        opacity: ['-', 1.0, ['*', this.animRatio, 0.75]]
      }
    }
    this.initMap()
    this.getData()
    this.animate()
  },
  methods: {
    initMap () {
      this.vectorSource = new Vector({
        attributions: 'zhan'
      })
      const raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'map2',
        title: 'map2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      let that = this
      that.map = new Map({
        layers: [raster, raster2,
        //   new TileLayer({
        //   source: new Stamen({
        //     layer: 'toner'
        //   })
        // }),
          new WebGLPointsLayer({
            style: that.style,
            source: that.vectorSource,
            disableHitDetection: true
          })],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 4
          // projection: 'EPSG:4326'
        })
      })
    },
    updateMinYear () {
      this.style.variables.minYear = parseInt(this.valuemin)
    },
    updateMaxYear () {
      this.style.variables.maxYear = parseInt(this.valuemax)
    },
    getData () {
      const client = new XMLHttpRequest()
      client.open('GET', 'zlocal/data/csv/meteorite_landings.csv')
      let that = this
      client.onload = function () {
        const csv = client.responseText
        const features = []

        let prevIndex = csv.indexOf('\n') + 1 // scan past the header line

        let curIndex
        while ((curIndex = csv.indexOf('\n', prevIndex)) !== -1) {
          const line = csv.substr(prevIndex, curIndex - prevIndex).split(',')
          prevIndex = curIndex + 1

          const coords = fromLonLat([parseFloat(line[4]), parseFloat(line[3])])
          if (isNaN(coords[0]) || isNaN(coords[1])) {
            // guard against bad data
            continue
          }

          features.push(
            new Feature({
              mass: parseFloat(line[1]) || 0,
              year: parseInt(line[2]) || 0,
              geometry: new Point(coords)
            })
          )
        }

        that.vectorSource.addFeatures(features)
      }
      client.send()
    },
    animate () {
      this.map.render()
      window.requestAnimationFrame(this.animate)
    }
  }
}
</script>

<style scoped>

</style>
